<script lang="ts" setup>
import { ref, reactive, onMounted, defineAsyncComponent, watch } from 'vue'
import { type FormInstance, type FormRules } from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'
import OneUpload from '/@/components/Common/OneUpload.vue'
import api from '/@/api/email/index';
import commonApi from '/@/api/common/index';
import { useRoute, useRouter } from 'vue-router'
import { useEmail } from '/@/stores/email';
import pinia from '/@/stores';
import SelectSource from './components/SelectSource.vue';
const AddModal = defineAsyncComponent(() => import('../supplier/addModal.vue'));

defineOptions({ name: 'orderCreate' })

const stores = useEmail(pinia);
const route = useRoute()
const router = useRouter()
const showOrderSource = ref(false)
// 平台列表
const companyOptions = ref<{
    code: string
    name: string
}[]>([])

// 工厂列表
const factoryOptions = ref<{
    id: number
    name: string
}[]>([])

// pi列表
const piOptions = ref<{
    id: number
    pi: string
    billCustomer: string
}[]>([])

const quicklyData = ref<{
    id: number
    productCode: string
    referenceName: string
}[]>([])

interface DictType {
    dictLabel: string
    dictValue: string
}
const payTypeData = ref<DictType[]>([])
const payMentTypeData = ref<DictType[]>([])
const AddModalRef = ref()
const SelectSourceRef = ref()
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    id: number | undefined
    companyCode: string
    pi: string
    po: string
    clientName: string
    clientEmail: string
    clientOrderImgs: string | any[]
    effectImgs: string | any[]
    orderAmountUsd: number
    orderAmountRmb: number
    exchangeRate: number
    payType: string
    chequeCode: string
    brushAmount: number | undefined
    payRatio: number | undefined
    payCertificate: string | any[]
    freightAmount: number
    goodsAmount: number
    deliverDate: string
    arrivedDate: string
    gp: number
    profitMargin: number
    lossRemark: string
    orderSource: string
    orderSourceName: string | undefined
    orderFactoryList: {
        dataType: number
        productCollectDetailsId: number | undefined
        factoryId: number | undefined
        quantity: number | undefined
        orderFactoryBillList: {
            billType: number
            goodsAmount: number
            payType: number
            payCertificate: string | any[]
            paymentType: number
            accountName: string
            accountCode: string
        }[]
        orderGoodsList: {
            itemNo: string
            itemName: string
            description: string
            quantity: number
            unitPrice: number
            amount: number
            otherPrice: number
            ttlAmount: number
        }[]
    }[]
    orderStatus: number | undefined
}
const ruleForm = reactive<RuleForm>({
    id: undefined,
    companyCode: '',
    pi: route.query.pi ? String(route.query.pi) : '',
    po: '',
    clientName: "",
    clientEmail: "",
    clientOrderImgs: [],
    effectImgs: [],
    orderAmountUsd: 0,
    orderAmountRmb: 0,
    exchangeRate: 0,
    payType: "",
    chequeCode: "",
    brushAmount: undefined,
    payRatio: undefined,
    payCertificate: [],
    freightAmount: 0,
    goodsAmount: 0,
    deliverDate: "",
    arrivedDate: "",
    gp: 0,
    profitMargin: 0,
    lossRemark: "",
    orderSource: '',
    orderSourceName: undefined,
    orderFactoryList: [
        {
            dataType: 1,
            productCollectDetailsId: undefined,
            factoryId: undefined,
            quantity: undefined,
            orderFactoryBillList: [
                {
                    billType: 0,
                    goodsAmount: 0,
                    payType: 0,
                    payCertificate: [],
                    paymentType: 0,
                    accountName: "",
                    accountCode: ""
                },
            ],
            orderGoodsList: [
                {
                    itemNo: "",
                    itemName: "",
                    description: "",
                    quantity: 0,
                    unitPrice: 0,
                    amount: 0,
                    otherPrice: 0,
                    ttlAmount: 0
                },
            ]
        },
    ],
    orderStatus: undefined
})
const rules = reactive<FormRules<RuleForm>>({
    companyCode: [{ required: true, message: '请选择平台', trigger: 'change' }],
    pi: [{ required: true, message: '请选择pi编号', trigger: 'change' }],
    po: [{ required: true, message: '请填写po编号', trigger: 'change' }],
    clientName: [{ required: true, message: '请填写客户名称', trigger: 'change' }],
    clientEmail: [{ required: true, message: '请填写邮箱', trigger: 'change' }],
    clientOrderImgs: [{ required: true, message: '请上传客户订单照片', trigger: 'change' }],
    effectImgs: [{ required: true, message: '请上传效果图', trigger: 'change' }],
    orderAmountUsd: [{ required: true, message: '请填写订单金额', trigger: 'change' }],
    orderAmountRmb: [{ required: false, message: '请填写订单金额', trigger: 'change' }],
    payType: [{ required: true, message: '请选择付款方式', trigger: 'change' }],
    payRatio: [{ required: true, message: '请选择付款比例', trigger: 'change' }],
    payCertificate: [{ required: true, message: '上传客户凭证', trigger: 'change' }],
    freightAmount: [{ required: true, message: '请填写国际运费', trigger: 'change' }],
    goodsAmount: [{ required: false, message: '请输入货款金额', trigger: 'change' }],
    deliverDate: [{ required: true, message: '请选择时间', trigger: 'change' }],
    arrivedDate: [{ required: true, message: '请选择时间', trigger: 'change' }],
})

// 查询平台数据
const getCompanyOptions = async () => {
    try {
        const { data } = await api.pi.companyList()
        companyOptions.value = data;
    } catch (error) {
        console.log(error)
    }
}
// 查询工厂数据
const getFactoryList = async () => {
    const account = stores.curAccount;
    try {
        const { data } = await api.factory.getList({
            emailAccount: account,
            pageNum: 1,
            pageSize: 999,
        });
        factoryOptions.value = data;
    } catch (error) {
        console.log(error)
    }
};
// 当前操作的采购信息的键值
const purInfoKey = ref()
// 打开新增工厂，并记录采购记录的key
const addFactory = (index: number) => {
    AddModalRef.value.showDialog = true
    purInfoKey.value = index
}
// 工厂完成后，更新选中的工厂id
const refreshFactory = async (id: number) => {
    await getFactoryList()
    ruleForm.orderFactoryList[purInfoKey.value].factoryId = id
}
const getPIData = async () => {
  const { code, data } = await api.pi.getList({
    pageNum: 1,
    pageSize: 9999,
  });
  if (code === 200) {
    piOptions.value = data;
  }
};
const remoteLoading = ref(false)
// 查询快速询价数据
const getQueryList = async (query: string, ids: number[] | undefined = undefined) => {
  if (query || ids) {
    remoteLoading.value = true
    try {
        const { code, data } = await api.order.queryList({
            keyword: query,
            ids
        });
        if (code === 200) {
            quicklyData.value = data;
      remoteLoading.value = false
        } 
    } catch (error) {
      remoteLoading.value = false
    }
  }
}
const getPayTypeData = async () => {
  const { code, data } = await commonApi.getDictData('pay_type');
  if (code === 200) {
    payTypeData.value = data;
  }
};
const getPayMentTypeData = async () => {
  const { code, data } = await commonApi.getDictData('payment_type');
  if (code === 200) {
    payMentTypeData.value = data;
  }
};
const submitForm = async (formEl: FormInstance | undefined, isSubmit: boolean) => {
    if (!formEl) return
    const obj = JSON.parse(JSON.stringify(ruleForm))
    obj.clientOrderImgs = obj.clientOrderImgs && Array.isArray(obj.clientOrderImgs) ? obj.clientOrderImgs.map((m: any) => m.url).join(',') : ''
    obj.effectImgs = obj.effectImgs && Array.isArray(obj.effectImgs) ? obj.effectImgs.map((m: any) => m.url).join(',') : ''
    obj.payCertificate = obj.payCertificate && Array.isArray(obj.payCertificate) ? obj.payCertificate.map((m: any) => m.url).join(',') : ''
    obj.orderFactoryList.forEach((item: any) => {
        item.orderFactoryBillList.forEach((m: any) => {
            m.payCertificate = m.payCertificate && Array.isArray(m.payCertificate) ? m.payCertificate.map((n: any) => n.url).join(',') : ''
        })
    })
    if (isSubmit) {
        // 提交审核
        await formEl.validate(async (valid, fields) => {
            if (valid) {
                const { code } = await api.order.add(obj)
                if (code === 200) {
                    ElMessage.success('提审成功，请等待审核')
                    close()
                }
            } else {
                console.log('error submit!', fields)
            }
        })
    } else {
        // 保存到草稿
        const { code } = await api.order.saveDraft(obj)
        if (code === 200) {
            ElMessage.success('保存成功')
            close()
        }
    }
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const close = () => {
    resetForm(ruleFormRef.value)
    router.go(-1)
}

const getInfo = async () => {
    const id = route.params.id
    if (id) {
        const { data } = await api.order.info(String(id))
        data.clientOrderImgs = data.clientOrderImgs.split(',').map((m: string) => ({ url: m }))
        data.effectImgs = data.effectImgs.split(',').map((m: string) => ({ url: m }))
        data.payCertificate = data.payCertificate.split(',').map((m: string) => ({ url: m }))
        const productCollectDetailsIds: number[] = []
        data.orderFactoryList.forEach((item: any) => {
            item.productCollectDetailsId && productCollectDetailsIds.push(item.productCollectDetailsId)
            item.orderFactoryBillList.forEach((m: any) => {
                m.payCertificate = m.payCertificate ? m.payCertificate.split(',').map((n: string) => ({ url: n })) : []
            })
        })
        if (data.orderSource) {
            SelectSourceRef.value.selectedValues = data.orderSource.split(',')
        }
        Object.assign(ruleForm, data)
        if (productCollectDetailsIds.length) {
            getQueryList('', productCollectDetailsIds)
        }
    }
}

const addProduct = (index: number) => {
    ruleForm.orderFactoryList[index].orderGoodsList.push({
        itemNo: "",
        itemName: "",
        description: "",
        quantity: 0,
        unitPrice: 0,
        amount: 0,
        otherPrice: 0,
        ttlAmount: 0
    })
}
const removeProduct = (index: number, gKey: number) => {
    ruleForm.orderFactoryList[index].orderGoodsList.splice(gKey, 1)
}

// const addBillForm = (index: number) => {
//     ruleForm.orderFactoryList[index].orderFactoryBillList.push({
//         billType: 0,
//         goodsAmount: 0,
//         payType: 0,
//         payCertificate: [],
//         paymentType: 0,
//         accountName: "",
//         accountCode: ""
//     })
// }

// const removeBillForm = (index: number, billKey: number) => {
//     ruleForm.orderFactoryList[index].orderFactoryBillList.splice(billKey, 1)
// }

const addOrderFactory = () => {
    ruleForm.orderFactoryList.push({
        dataType: 1,
        productCollectDetailsId: undefined,
        factoryId: undefined,
        quantity: undefined,
        orderFactoryBillList: [
            {
                billType: 0,
                goodsAmount: 0,
                payType: 0,
                payCertificate: [],
                paymentType: 0,
                accountName: "",
                accountCode: ""
            },
        ],
        orderGoodsList: [
            {
                itemNo: "",
                itemName: "",
                description: "",
                quantity: 0,
                unitPrice: 0,
                amount: 0,
                otherPrice: 0,
                ttlAmount: 0
            },
        ]
    })
}
const removeOrderFactory = (index: number) => {
    ruleForm.orderFactoryList.splice(index, 1)
}

// 接收选择的来源数据
const receiveData = (obj: { labels: string, values: string }) => {
    ruleForm.orderSource = obj.values
    ruleForm.orderSourceName = obj.labels
}

const billTypeChange = (obj: { billType: number; goodsAmount: number; }, orderFactoryForm: { orderGoodsList: any[]; }) => {
    if (obj.billType === 0) {
        let amount = 0
        orderFactoryForm.orderGoodsList.forEach((item: any) => {
            amount += item.ttlAmount
        })
        obj.goodsAmount = amount
    } else {
        obj.goodsAmount = 0
    }
}

const calcAmount = (obj: { quantity: number; unitPrice: number; amount: number; otherPrice: any; ttlAmount: any; }, orderFactoryForm: { orderFactoryBillList: any[]; orderGoodsList: any[]}) => {
    if (obj.quantity && obj.unitPrice) {
        obj.amount = obj.quantity * obj.unitPrice
        obj.ttlAmount = obj.amount + obj.otherPrice
        let amount = 0
        ruleForm.orderFactoryList.forEach((item: any) => {
            item.orderGoodsList.forEach((m: any) => {
                amount += m.ttlAmount
            })
        })
        ruleForm.goodsAmount = amount

        billTypeChange(orderFactoryForm.orderFactoryBillList[0], orderFactoryForm)
    }
}

// 回显订单来源labels
watch([() => ruleForm.orderSource, () => SelectSourceRef.value?.orderSourceOptions], () => {
    const orderSourceOptions = SelectSourceRef.value.orderSourceOptions
    if (ruleForm.orderSource && orderSourceOptions.length && !ruleForm.orderSourceName) {
        const arrs = ruleForm.orderSource.split(',')
        const arrName: any[] = []
        orderSourceOptions.forEach((item: { value: string; label: any; children: any[]; }) => {
            if (item.value === arrs[0]) {
                arrName.push(item.label)
            }
            if (arrs[1] && item.children?.length) {
                const obj = item.children.find((i: any) => i.value === arrs[1])
                obj && (arrName.push(obj.label))
            }
        });
        ruleForm.orderSourceName = arrName.join(' / ')
    }
})

onMounted(() => {
    getCompanyOptions()
    getFactoryList()
    getPIData()
    getInfo()
    getPayTypeData()
    getPayMentTypeData()
})
</script>
<template>
    <div class="page">
        <div class="cont">
            <h2>创建订单</h2>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px">
                <h3>客户订单信息</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="选择平台" prop="companyCode">
                            <el-select v-model="ruleForm.companyCode" placeholder="请选择" filterable class="select">
                                <el-option v-for="item in companyOptions" :key="item.code" :label="item.name"
                                    :value="item.code" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" />
                    <el-col :span="12">
                        <el-form-item label="PI号码" prop="pi">
                            <el-select v-model="ruleForm.pi" placeholder="请选择" class="select" filterable @change="ruleForm.clientName = piOptions.find(i => i.pi === ruleForm.pi)?.billCustomer || ''">
                                <el-option v-for="value in piOptions" :key="value.id" :label="value.pi" :value="value.pi" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="PO号码" prop="po">
                            <el-input v-model="ruleForm.po" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户名字" prop="clientName">
                            <el-input v-model="ruleForm.clientName" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="客户邮箱" prop="clientEmail">
                            <el-input v-model="ruleForm.clientEmail" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单来源" prop="orderSourceName">
                            <span v-if="ruleForm.orderSourceName" style="margin-right: 8px;">{{ ruleForm.orderSourceName }}</span>
                            <el-button type="primary" @click="showOrderSource = true">选择来源</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="客户订单" prop="clientOrderImgs">
                            <OneUpload v-model="ruleForm.clientOrderImgs" accept="" :limit="10" :maxSize="10"
                                :fileType="[]" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="效果图" prop="effectImgs">
                            <OneUpload v-model="ruleForm.effectImgs" accept="" :limit="10" :maxSize="10"
                                :fileType="[]" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3>客户付款信息</h3>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="订单金额(USD)" prop="orderAmountUsd">
                            <el-input v-model="ruleForm.orderAmountUsd" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="汇率" prop="exchangeRate">
                            <el-input v-model="ruleForm.exchangeRate" placeholder="请填写" disabled class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="订单金额(RMB)" prop="orderAmountRmb">
                            <el-input v-model="ruleForm.orderAmountRmb" placeholder="请填写" disabled
                                class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="客户付款方式" prop="payType">
                            <el-radio-group v-model="ruleForm.payType">
                                <el-radio label="支票" value="zp" />
                                <el-radio label="TT" value="tt" />
                                <el-radio label="信用卡" value="xyk" />
                                <el-radio label="ACH" value="ach" />
                                <el-radio disabled label="放账" value="fz" />
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.payType === 'zp'" :span="24">
                        <el-form-item label="支票编号" prop="chequeCode">
                            <el-input v-model="ruleForm.chequeCode" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="ruleForm.payType === 'xyk'" :span="24">
                        <el-form-item label="刷卡金额" prop="brushAmount">
                            <el-input-number v-model="ruleForm.brushAmount" :controls="false" placeholder="请填写" class="select"></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="付款比例" prop="payRatio">
                            <div style="width: 40%; padding: 0 10px;">
                                <el-slider v-model="ruleForm.payRatio" :step="1" :min="0" :max="10" show-stops />
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="客户付款凭证" prop="payCertificate">
                            <OneUpload v-model="ruleForm.payCertificate" accept="" :limit="10" :maxSize="10"
                                :fileType="[]" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3>采购信息</h3>
                <div v-for="(orderFactoryForm, index) in ruleForm.orderFactoryList" :key="index" class="itemForm-diy">
                    <div class="orderFactoryForm">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="对接类型" prop="dataType">
                                    <el-radio-group v-model="orderFactoryForm.dataType">
                                        <el-radio label="业务员对接" :value="1"></el-radio>
                                        <el-radio label="采购员对接" :value="2"></el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="关联快速询价" prop="productCollectDetailsId">
                                    <el-select v-model="orderFactoryForm.productCollectDetailsId" placeholder="请选择" filterable remote :remote-method="getQueryList" :loading="remoteLoading" clearable class="select" @change="orderFactoryForm.productCollectDetailsId && (orderFactoryForm.dataType = 2)">
                                        <el-option v-for="qd in quicklyData" :label="`${qd.productCode}: ${qd.referenceName}`" :value="qd.id" :key="qd.id" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="数量" prop="quantity">
                                    <el-input-number v-model="orderFactoryForm.quantity" placeholder="输入数量" />
                                </el-form-item>
                            </el-col>
                            <el-col v-show="orderFactoryForm.dataType === 1" :span="24">
                                <el-form-item label="选择工厂" prop="factoryId">
                                    <el-select v-model="orderFactoryForm.factoryId" placeholder="请选择" class="select">
                                        <el-option v-for="fa in factoryOptions" :label="fa.name" :value="fa.id" :key="fa.id" />
                                    </el-select>
                                    <el-button type="primary" :icon="Plus" style="margin-left: 16px;" @click="addFactory(index)">新增工厂</el-button>
                                </el-form-item>
                            </el-col>
                            <el-col v-show="orderFactoryForm.dataType === 1" :span="24">
                                <div v-for="(goods, gKey) in orderFactoryForm.orderGoodsList" :key="gKey" class="table-diy">
                                    <table cellpadding="0"
                                        cellspacing="0" border="0" class="table">
                                        <thead>
                                            <tr>
                                                <th>ITEM-No编号</th>
                                                <th>ITEM-Name品名</th>
                                                <th>DESCRIPTION-描述</th>
                                                <th>QUANTITY-数量</th>
                                                <th>UNIT PRICE-单价(RMB)</th>
                                                <th>AMOUNT-金额(RMB)</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <el-input v-model="goods.itemNo" placeholder="请填写编号"></el-input>
                                                </td>
                                                <td>
                                                    <el-input v-model="goods.itemName" placeholder="请填写品名"></el-input>
                                                </td>
                                                <td>
                                                    <el-input v-model="goods.description" placeholder="请填写描述"></el-input>
                                                </td>
                                                <td>
                                                    <el-input-number v-model="goods.quantity" placeholder="请填写数量" :controls="false" style="width: 100%;" @change="calcAmount(goods, orderFactoryForm)"></el-input-number>
                                                </td>
                                                <td>
                                                    <el-input-number v-model="goods.unitPrice" placeholder="请填写单价" :controls="false" :precision="3" style="width: 100%;" @change="calcAmount(goods, orderFactoryForm)"></el-input-number>
                                                </td>
                                                <td>
                                                    <el-input-number v-model="goods.amount" disabled placeholder="自动计算" :controls="false" :precision="3" style="width: 100%;"></el-input-number>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>样品费+制版费+杂费</td>
                                                <td colspan="2">
                                                    <el-input-number v-model="goods.otherPrice" placeholder="请输入额外费用" :controls="false" :precision="3" style="width: 100%;" @change="calcAmount(goods, orderFactoryForm)"></el-input-number>
                                                </td>
                                                <td>TTL AMOUNT RMB</td>
                                                <td colspan="2">
                                                    <el-input-number v-model="goods.ttlAmount" disabled placeholder="自动计算" :controls="false" :precision="3" style="width: 100%;"></el-input-number>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <el-button :icon="Minus" type="danger" circle class="remove" :disabled="gKey === 0" @click="removeProduct(index, gKey)"></el-button>
                                </div>
                            </el-col>
                            <el-col v-show="orderFactoryForm.dataType === 1" :span="24">
                                <div class="pro-count">
                                    <div style="width: 120px;">当前共有产品<span class="count">{{ orderFactoryForm.orderGoodsList.length }}</span>个</div>
                                    <el-button :icon="Plus" type="success" circle @click="addProduct(index)"></el-button>
                                    <div style="width: 120px;"></div>
                                </div>
                            </el-col>
                        </el-row>
                        <h3 v-show="orderFactoryForm.dataType === 1">货款信息</h3>
                        <div v-show="orderFactoryForm.dataType === 1" v-for="(billForm, billKey) in orderFactoryForm.orderFactoryBillList" :key="billKey" class="itemForm-diy">
                            <el-row class="itemForm">
                                <el-col :span="8">
                                    <el-form-item label="类型" prop="billType">
                                        <el-radio-group v-model="billForm.billType" @change="billTypeChange(billForm, orderFactoryForm)">
                                            <el-radio label="全款" :value="0"></el-radio>
                                            <el-radio label="定金" :value="1"></el-radio>
                                            <el-radio label="尾款" :value="2" :disabled="true" />
                                            <el-radio label="工厂退款" :value="3" :disabled="true" />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="本次货款金额" prop="goodsAmount">
                                        <el-input-number v-model="billForm.goodsAmount" :disabled="billForm.billType === 0" :controls="false" :precision="3" placeholder="" class="select"></el-input-number>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="付款方式" prop="payType">
                                        <el-radio-group v-model="billForm.payType">
                                            <el-radio v-for="item in payTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="业务员收款账号" prop="paymentType">
                                        <el-radio-group v-model="billForm.paymentType">
                                            <el-radio v-for="item in payMentTypeData" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="户名" prop="accountName">
                                        <el-input v-model="billForm.accountName" placeholder="" class="select"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="账号" prop="accountCode">
                                        <el-input v-model="billForm.accountCode" placeholder="" class="select"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="业务员付款凭证" prop="payCertificate">
                                        <OneUpload v-model="billForm.payCertificate" accept="" :limit="15" :maxSize="10"
                                            :fileType="[]" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!-- <el-button :icon="Minus" type="danger" circle class="payment-remove" @click="removeBillForm(index, billKey)"></el-button> -->
                        </div>
                        <!-- <div class="payment-add">
                            <el-button :icon="Plus" type="success" circle @click="addBillForm(index)"></el-button>
                        </div> -->
                    </div>
                    <el-button :icon="Minus" type="danger" circle class="payment-remove" @click="removeOrderFactory(index)"></el-button>
                </div>
                <div class="payment-add">
                    <el-button :icon="Plus" type="success" circle @click="addOrderFactory"></el-button>
                </div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="预估国际运费" prop="freightAmount">
                            <el-input v-model="ruleForm.freightAmount" placeholder="请填写" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="货款金额(RMB)" prop="goodsAmount">
                            <el-input v-model="ruleForm.goodsAmount" disabled placeholder="自动计算"
                                class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预计发货日期" prop="deliverDate">
                            <el-date-picker v-model="ruleForm.deliverDate" type="date" placeholder="选择日期"
                                value-format="YYYY-MM-DD" style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预计到货日期" prop="arrivedDate">
                            <el-date-picker v-model="ruleForm.arrivedDate" type="date" placeholder="选择日期"
                                value-format="YYYY-MM-DD" style="width: 200px;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <h3>利润信息</h3>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="预估GP" prop="gp">
                            <el-input v-model="ruleForm.gp" disabled placeholder="自动计算" class="select"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预估利润率" prop="profitMargin">
                            <span style="color: var(--el-color-danger);">{{ (ruleForm.profitMargin * 100).toFixed(2) }}%</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="亏损说明" prop="lossRemark">
                            <el-input v-model="ruleForm.lossRemark" type="textarea" placeholder="请填写"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="buttons-group">
                    <el-button @click="close" class="buttons">关闭</el-button>
                    <el-button v-if="!ruleForm.id || ruleForm.orderStatus !== undefined && +ruleForm.orderStatus < 0" type="success" @click="submitForm(ruleFormRef, false)" class="buttons">
                        保存草稿
                    </el-button>
                    <el-button v-if="!ruleForm.id || ruleForm.orderStatus !== undefined && +ruleForm.orderStatus < 0" type="primary" @click="submitForm(ruleFormRef, true)" class="buttons">
                        提交审核
                    </el-button>
                </div>
            </el-form>
        </div>
        <AddModal ref="AddModalRef" :data="{}" @refresh="refreshFactory" />
        <SelectSource ref="SelectSourceRef" v-model="showOrderSource" @receiveData="receiveData" />
    </div>
</template>
<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100vh;
    padding: 16px;

    .cont {
        box-shadow: var(--el-box-shadow-light);
        height: 100%;
        padding: 16px;
        overflow: auto;
        background-color: #fff;
        border-radius: 4px;

        h2 {
            font-size: 24px;
            font-weight: bold;
            color: #606266;
            margin-bottom: 36px;
        }

        h3 {
            color: #303133;
            margin-bottom: 18px;
        }

        .select {
            width: 200px;

            &+.select {
                margin-left: 6px;
            }
        }
        .table-diy {
            display: flex;
            align-items: center;
            .table {
                width: 100%;
                display: table;
                background-color: #5e2795;
                color: #fff;
                padding: 6px;
                font-size: 12px;

                th {
                    padding: 2px 0 4px;
                }

                td {
                    text-align: center;
                    font-weight: bold;
                    padding: 4px 0px;
                }
            }
            .remove {
                margin-left: 16px;
            }
            & + .table-diy {
                margin-top: 16px;
            }
        }

        .pro-count {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 8px;
            font-size: 12px;

            .count {
                color: #f56c6c;
                font-weight: bold;
            }
        }

        .buttons-group {
            position: sticky;
            bottom: 0;
            right: 0;
            display: flex;
            justify-content: flex-end;
            margin-top: 18px;

            .buttons {
                width: 120px;
            }
        }

        .orderFactoryForm {
            padding: 16px;
            border-radius: 4px;
            border: 2px dashed var(--el-border-color);
            width: 100%;

            &+.orderFactoryForm {
                margin-top: 18px;
            }
        }
        .itemForm-diy {
            display: flex;
            align-items: center;
            .itemForm {
                flex: 1;
                padding: 16px;
                border-radius: 8px;
                border: 1px solid var(--el-border-color);
            }
            .payment-remove {
                margin-left: 16px;
            }

            & +.itemForm-diy {
                margin-top: 18px;
            }
        }
        .payment-add {
            display: flex;
            justify-content: center;
            margin-top: 8px;
            margin-bottom: 16px;
        }
    }
}
</style>